<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
{#    <meta http-equiv="pragma" content="no-cache">#}
{#    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">#}
{#    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">#}
{#    <meta http-equiv="expires" content="-1">#}
    <title>停车场管理系统</title>
    <link rel="stylesheet" type="text/css" href="/static/css/index.css">

</head>


{#<script>#}
{#    function shuaxin() {#}
{#        var form = document.createElement("form");#}
{#        var str = "<input type='submit' value='submit'>";#}
{#        form.innerHTML = str;#}
{#        document.body.append(form)#}
{#    }#}
{#</script>#}


<body>
<div align="center"><h2>停车场管理系统</h2></div>

{#<div class="show">#}
{#    <input type="button"  onclick="shuaxin()" value="shuaxin">#}
{##}
{##}
{##}
{##}
{#</div>#}
<script>






    function aclick(x) {

    {#    $.ajaxSetup({#}
    {#    data: {csrfmiddlewaretoken: '{{ csrf_token }}' },#}
    {#  });#}
        var temp = {{ cardetail|safe }};
        var temp2 = {{ detail|safe }}
        var detId = 'ID:  ' + temp[x].id;
        var detChepai = '车牌号:  ' + temp[x].chepai;
        var detChexing = '车型:  ' + temp[x].chexing;

        document.getElementById("detailId").innerHTML= detId;
        document.getElementById("detailChepai").innerHTML= detChepai;
        document.getElementById("detailChexing").innerHTML= detChexing;
        if (x < 10){
            document.getElementById("detailimg").src = "/static/carimg/"+'0'+x.toString()+'.jpg'

        }
        else{
            document.getElementById("detailimg").src = "/static/carimg/"+x.toString()+'.jpg'
        }
    }
</script>

<div class="show">

    <form action="/shuaxin/" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <table cellspacing="20" >

        <thead>

            <input type="submit" value="刷新"
                  style="background-color: white;border-radius: 100%;border-color: black;width: 45px;height: 45px;border-width: 2px"
            >
        </thead><br>


            {% for det in detail %}
            <tr>

                <input type="button" name={{ det.id }}  value="" onclick="aclick({{ det.id }})" style="background-color: {{ det.color }} ;
                    border: 6px;border-color:#000000;width: 120px;height: 90px;border-radius: 4px" >&nbsp;
{#                <input type="text" name={{ det.id }} value={{ det.id }}  style="background-color: {{ det.color }} ;#}
{#                    border: 6px;border-color:black;width: 0px;height: 0px" >&nbsp;#}
            </tr>
{#            {% if forloop >= 10 %}#}
{#                <tr>#}
{#                    <input type="submit" value="" style="background-color: {{ det.color }} ;#}
{#                    border: 6px;border-color:black;width: 120px;height: 90px" >&nbsp;#}
{#                </tr>#}
{#            {% endif %}#}
            {% endfor %}


        </table>
    </form>
</div>






<!--      其实完全可以使用JS创建form和table和button，但是，我懒-->
{#<div class="show">#}
{#    <form action="/indexupload/" method="post" enctype="multipart/form-data">#}
{#        {% csrf_token %}#}
{#        <table cellspacing="20">#}
{#            {% for det in detail %}#}
{#            <tr>#}
{#                <td><input type="submit" value="" style="background-color: lawngreen ;#}
{#                border: 6px;border-color:black;width: 120px;height: 90px" ></td>#}
{#                <td><input type="submit" value="" style="background-color: lawngreen ;#}
{#                border: 6px;border-color:black;width: 120px;height: 90px" ></td>#}
{#                <td><input type="submit" value="" style="background-color: lawngreen ;#}
{#                border: 6px;border-color:black;width: 120px;height: 90px" ></td>#}
{#                <td><input type="submit" value="" style="background-color: lawngreen ;#}
{#                border: 6px;border-color:black;width: 120px;height: 90px" ></td>#}
{#                <td><input type="submit" value="" style="background-color: lawngreen ;#}
{#                border: 6px;border-color:black;width: 120px;height: 90px" ></td>#}
{#            </tr>#}
{#            {% endfor %}#}
{#            <tr>#}
{#                <td><input type="submit" value="" style="background-color: lawngreen ;#}
{#                border: 6px;border-color:black;width: 120px;height: 90px" ></td>#}
{#                <td><input type="submit" value="" style="background-color: lawngreen ;#}
{#                border: 6px;border-color:black;width: 120px;height: 90px" ></td>#}
{#                <td><input type="submit" value="" style="background-color: lawngreen ;#}
{#                border: 6px;border-color:black;width: 120px;height: 90px" ></td>#}
{#                <td><input type="submit" value="" style="background-color: lawngreen ;#}
{#                border: 6px;border-color:black;width: 120px;height: 90px" ></td>#}
{#                <td><input type="submit" value="" style="background-color: lawngreen ;#}
{#                border: 6px;border-color:black;width: 120px;height: 90px" ></td>#}
{#            </tr>#}
{#            <tr>#}
{#                <td><input type="submit" value="" style="background-color: lawngreen ;#}
{#                border: 6px;border-color:black;width: 120px;height: 90px" ></td>#}
{#                <td><input type="submit" value="" style="background-color: lawngreen ;#}
{#                border: 6px;border-color:black;width: 120px;height: 90px" ></td>#}
{#                <td><input type="submit" value="" style="background-color: lawngreen ;#}
{#                border: 6px;border-color:black;width: 120px;height: 90px" ></td>#}
{#                <td><input type="submit" value="" style="background-color: lawngreen ;#}
{#                border: 6px;border-color:black;width: 120px;height: 90px" ></td>#}
{#                <td><input type="submit" value="" style="background-color: lawngreen ;#}
{#                border: 6px;border-color:black;width: 120px;height: 90px" ></td>#}
{#            </tr>#}
{#            <tr>#}
{#                <td><input type="submit" value="" style="background-color: lawngreen ;#}
{#                border: 6px;border-color:black;width: 120px;height: 90px" ></td>#}
{#                <td><input type="submit" value="" style="background-color: lawngreen ;#}
{#                border: 6px;border-color:black;width: 120px;height: 90px" ></td>#}
{#                <td><input type="submit" value="" style="background-color: lawngreen ;#}
{#                border: 6px;border-color:black;width: 120px;height: 90px" ></td>#}
{#                <td><input type="submit" value="" style="background-color: lawngreen ;#}
{#                border: 6px;border-color:black;width: 120px;height: 90px" ></td>#}
{#                <td><input type="submit" value="" style="background-color: lawngreen ;#}
{#                border: 6px;border-color:black;width: 120px;height: 90px" ></td>#}
{#            </tr>#}
{#            <tr>#}
{#                <td><input type="submit" value="" style="background-color: lawngreen ;#}
{#                border: 6px;border-color:black;width: 120px;height: 90px" ></td>#}
{#                <td><input type="submit" value="" style="background-color: lawngreen ;#}
{#                border: 6px;border-color:black;width: 120px;height: 90px" ></td>#}
{#                <td><input type="submit" value="" style="background-color: lawngreen ;#}
{#                border: 6px;border-color:black;width: 120px;height: 90px" ></td>#}
{#                <td><input type="submit" value="" style="background-color: lawngreen ;#}
{#                border: 6px;border-color:black;width: 120px;height: 90px" ></td>#}
{#                <td><input type="submit" value="" style="background-color: lawngreen ;#}
{#                border: 6px;border-color:black;width: 120px;height: 90px" ></td>#}
{#            </tr>#}
{##}
{##}
{#        </table>#}
{##}
{##}
{#    </form>#}
{##}
{#</div>#}


<div >
    <form action="/shibiepic_upload/" method="post" enctype="multipart/form-data">

    <div class="surfaceThree selectButton" >选择文件

        <input type="file" title=" " name="file">


    </div>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <div class="surfaceThree selectButton">上传

        {% csrf_token %}
    <input type="submit" value="上传">
    </div>
</form>

<div class="img">
    <p>
            <img src="{{ imgname }}" height="200" >
    </p>
</div>
<div class="chepai">
    <h4>
        {{ chepai }}
    </h4>
    <h4>
         {{ chexing }}
    </h4>
    <h4>
        离停车场入口最近的是：{{ sug1 }}号停车位
    </h4>
    <h4>
        离商场入口最近的是：{{ sug2 }}号停车位
    </h4>
</div>
    <hr class="hrcss">
</div>

<div class="detail">
    <img src="" id="detailimg"  height="200"/>
</div>

<div class="detail">
    <h4 id="detailId">id: </h4>
    <h4 id="detailChepai">车牌号：</h4>
    <h4 id="detailChexing">车型：</h4>

</div>



</body>
</html>